<template>
	<view class="main">
		<nav-bar :isBack="false" transparent :isFixed="false"></nav-bar>
		<!-- 个人信息 -->
		<view class="info">
			<view class="info-picdir" @click="uploadAvatar">
				<image :src="baseImage + info.picdir" mode="" v-if="info.picdir"></image>
				<image :src="baseImage + usual.companyLogo" mode="" v-else></image>
			</view>
			<view class="info-name">
				{{info.title || ""}}
			</view>
			<view class="info-state" :class="info.status==0? 'auth':''">
				{{info.status==0? '已认证':'未认证'}}
			</view>
		</view>
		<!-- 主按钮区域 -->
		<view class="cata-main cata-common">
			<view class="cata-main-item" @click="toUrl('/pages/ucenter/qiyeduan/gangwei/list?status=0&isOk=1')">
				<uni-badge class="uni-badge-left-margin" :text="info.onLineNum || 0" absolute="rightTop" size="small">
					<view class="cata-main-item-icon">
						<image :src="imgUrl + 'homeMainIcon1.png'" mode=""></image>
					</view>
					<view class="cata-main-item-title">
						已发岗位 ({{ isOkNum?isOkNum:0 }})
					</view>
				</uni-badge>
			</view>
			<view class="cata-main-item" @click="toUrl('/pages/ucenter/qiyeduan/gangwei/list?status=1')">
				<uni-badge class="uni-badge-left-margin" :text="info.audioNum || 0" absolute="rightTop" size="small">
					<view class="cata-main-item-icon">
						<image :src="imgUrl + 'homeMainIcon2.png'" mode=""></image>
					</view>
					<view class="cata-main-item-title">
						待审岗位 ({{ status1Num?status1Num:0 }})
					</view>
				</uni-badge>
			</view>
			<view class="cata-main-item" @click="toUrl('/pages/ucenter/common/fav')">
				<uni-badge class="uni-badge-left-margin" :text="info.favNum || 0" absolute="rightTop" size="small">
					<view class="cata-main-item-icon">
						<image :src="imgUrl + 'homeMainIcon3.png'" mode=""></image>
					</view>
					<view class="cata-main-item-title">
						收藏 ({{ favNum?favNum:0 }})
					</view>
				</uni-badge>
			</view>
		</view>
		<!-- 菜单区域 -->
		<view class="cata-menu cata-common">
			<view class="cata-menu-item" @click="toUrl('/pages/ucenter/qiyeduan/me')">
				<view class="cata-menu-item-icon">
					<image :src="imgUrl + 'homeMenuIcon1.png'" mode=""></image>
				</view>
				<view class="cata-menu-item-title">
					企业信息
				</view>
				<view class="cata-menu-item-more">
					<van-icon name="arrow" color="#ccc" />
				</view>
			</view>
			<view class="cata-menu-item" @click="toUrl('/pages/ucenter/qiyeduan/gangwei/list')">
				<view class="cata-menu-item-icon">
					<image :src="imgUrl + 'homeMenuIcon2.png'" mode=""></image>
				</view>
				<view class="cata-menu-item-title">
					岗位管理
				</view>
				<view class="cata-menu-item-more">
					<van-icon name="arrow" color="#ccc" />
				</view>
			</view>
			<view class="cata-menu-item" @click="toUrl('/pages/ucenter/qiyeduan/remark/list')">
				<view class="cata-menu-item-icon">
					<image :src="imgUrl + 'homeMenuIcon3.png'" mode=""></image>
				</view>
				<view class="cata-menu-item-title">
					结业点评
				</view>
				<view class="cata-menu-item-more">
					<van-icon name="arrow" color="#ccc" />
				</view>
			</view>
			<view class="cata-menu-item" @click="toUrl('/pages/ucenter/common/fav')">
				<view class="cata-menu-item-icon">
					<image :src="imgUrl + 'homeMenuIcon4.png'" mode=""></image>
				</view>
				<view class="cata-menu-item-title">
					我的收藏
				</view>
				<view class="cata-menu-item-more">
					<van-icon name="arrow" color="#ccc" />
				</view>
			</view>
		</view>
		<view class="cata-menu cata-common">
			<view class="cata-menu-item" @click="toUrl('/pages/ucenter/common/about')">
				<view class="cata-menu-item-icon">
					<image :src="imgUrl + 'homeMenuIcon5.png'" mode=""></image>
				</view>
				<view class="cata-menu-item-title">
					关于我们
				</view>
				<view class="cata-menu-item-more">
					<van-icon name="arrow" color="#ccc" />
				</view>
			</view>
			<view class="cata-menu-item" @click="toUrl('/pages/ucenter/detail?cataName=隐私政策')">
				<view class="cata-menu-item-icon">
					<image :src="imgUrl + 'homeMenuIcon6.png'" mode=""></image>
				</view>
				<view class="cata-menu-item-title">
					隐私政策
				</view>
				<view class="cata-menu-item-more">
					<van-icon name="arrow" color="#ccc" />
				</view>
			</view>
			<view class="cata-menu-item" @click="loginOut()">
				<view class="cata-menu-item-icon">
					<image :src="imgUrl + 'homeMenuIcon7.png'" mode=""></image>
				</view>
				<view class="cata-menu-item-title">
					安全退出
				</view>
				<view class="cata-menu-item-more">
					<van-icon name="arrow" color="#ccc" />
				</view>
			</view>
		</view>
		<view style="margin-top: 60upx;">
			 <view class="some" v-html="usual.bottomCnt">
			 </view>
			 <view class="some">
			 	<span @click="toUrl('/pages/ucenter/common/img?str=hrZheng')">人力资源许可证</span>
				<span> {{ ' '+'|'+' '}} </span>
				<span @click="toUrl('/pages/ucenter/common/img?str=businessLicense')"> 营业执照</span>
			 </view>
			
		</view>
		<!-- 背景图 -->
		<view class="main-bj">
			<image :src="imgUrl + 'homeQiyeduanBj.jpg'" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import {
		NavBar
	} from '@/components/Navbar.vue'
	import {
		getMyCompanyInfo,
		updateCompanyMyInfo,
		updateCompanyAvatar,
		getTongji
	} from "@/core/web-api/qiyeduan.js"
	import {
		uploadFile,
		formatImage
	} from "@/utils/util.js"
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				info: {},
				isOkNum:0,
				status1Num:0,
				favNum:0,
			}
		},
		methods: {
			/**
			 * 更换头像
			 */
			uploadAvatar() {
				let that = this;
				uni.chooseImage({
					success:(e)=> {
						let obj = formatImage(e);
						console.log(obj)
						uploadFile(obj[0]).then(res => {
							updateCompanyAvatar({
								picdir:res,
							}).then(data => {
								if (data.code == 20000) {
									that.info.picdir = res;
									that.$store.commit("setUserInfo",that.info)
									uni.showToast({
										title:"上传成功"
									})
								}
							})
						})
					},
					fail() {
						uni.showToast({
							title:"上传失败",
							icon:"none"
						})
					}
				})

			},
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			getUserInfo() {
				getMyCompanyInfo().then(res => {
					if (res.code == 20000) {
						this.info = res.data.detail;
						this.$store.commit("setUserInfo", res.data.detail)
					}
				})
			},
			loginOut(){
				uni.showModal({
					title:"温馨提示",
					content:"是否退出登录？",
					success: (val) => {
						if(val.confirm){
							this.$store.commit("setUserInfo", {})
							this.$store.commit("setType", "")
							this.$store.commit("setToken","")
							this.$socket.onUnload();
							uni.reLaunch({
								url:"/pagesroot/login/login"
							})
						}
					}
				})
			},
			getTongjiNum(){
				getTongji().then(res => {
					if (res.code == 20000) {
						console.log(res.data)
						this.isOkNum = res.data.isOkNum
						this.status1Num = res.data.statusNum
						this.favNum = res.data.favNum
					}
				})
			},
			childOnShow() {
				this.getUserInfo();
				this.getTongjiNum();
			}

		},
		created() {
			this.getUserInfo();
			this.getTongjiNum();
		},
		computed: {
			...mapGetters(['getStateAndMenuRectHeight']),
			...mapState(['userInfo', 'type', 'baseImage','imgUrl','usual'])
		},
		watch: {
			userInfo: {
				deep: true,
				handler(val) {
					if (!val) return;
					this.info = val;
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		padding-bottom: 30upx;

		&-bj {
			position: fixed;
			width: 100vw;
			left: 0;
			top: 0;
			z-index: -1;

			image {
				width: 100%;
			}
		}
	}
	
	.some{
		color:#aaaaaa;
		text-align:center;
		font-size: 26upx;
		line-height: 1.8;
	}

	.info {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40upx;

		&-picdir {
			width: 122upx;
			height: 122upx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(255, 255, 255, .2);

			image {
				width: 114upx;
				height: 114upx;
				background-color: #fff;
				border-radius: 50%;
			}
		}

		&-name {
			margin-top: 35upx;
			font-size: 34upx;
			color: #4d4d4d;
		}

		&-state {
			margin-top: 30upx;
			width: 158upx;
			height: 50upx;
			border-radius: 50upx;
			text-align: center;
			line-height: 50upx;
			background-color: #ccc;
			color: #333;
			font-size: 26upx;

			&.auth {
				// background-color: unset;
				background: linear-gradient(to bottom, #4b6bfe, #6bacff);
				color: #fff;
			}
		}
	}

	.cata {
		&-common {
			width: 100%;
			background-color: #fff;
			border-radius: 33upx;
			box-shadow: 0upx 0upx 24upx rgba(70, 178, 255, .41);
			box-sizing: border-box;
		}

		&-main {
			margin-bottom: 35upx;
			width: 100%;
			padding: 40upx 70upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				&-icon image {
					width: 60upx;
					height: 60upx;
				}

				&-title {
					font-size: 26upx;
					color: #000000;
				}

			}
		}

		&-menu {
			margin-bottom: 35upx;
			width: 100%;

			&-item {
				display: flex;
				align-items: center;
				padding: 30upx 25upx;
				border-bottom: 2upx solid #f8f8f8;

				&:last-child {
					border-bottom: 0;
				}

				&-icon {
					width: 40upx;
					height: 40upx;

					image {
						width: 40upx;
						height: 40upx;
					}
				}

				&-title {
					font-size: 28upx;
					color: #4d4d4d;
					padding: 0 20upx;
					box-sizing: border-box;
					flex: 1;
				}
			}
		}
	}
	.uni-badge-left-margin{
		text-align: center;
	}
</style>